<template>
  <view class="container">
    <view class="title">
      <image class="logo" src="../../static/zhihuishitang.png"/>
    </view>

    <view class="form-container">
      <input
          class="input"
          type="text"
          placeholder="请输入账号"
          v-model="formData.account"
      />
      <input
          class="input"
          type="password"
          placeholder="请输入密码"
          v-model="formData.password"
      />
      <button class="submit-btn" type="primary" @click="handleLogin">登录</button>
    </view>
    <view class="agreement-text">
      请阅读并同意《用户隐私协议》相关内容提示后再进行登录
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        account: 'user',
        password: '123456'
      }
    }
  },
  methods: {
    // 表单验证
    validateForm() {
      if (!this.formData.account.trim()) {
        uni.showToast({title: '请输入账号', icon: 'none'})
        return false
      }
      if (!this.formData.password.trim()) {
        uni.showToast({title: '请输入密码', icon: 'none'})
        return false
      }
      return true
    },

    // 处理登录
    async handleLogin() {
      if (!this.validateForm()) return

      uni.showLoading({title: '登录中...'})

      try {
        const res = await uni.request({
          url: 'http://127.0.0.1:8080/user/user/user/loginByAccount',
          method: 'POST',
          data: {
            account: this.formData.account,
            password: this.formData.password
          },
          header: {
            'Content-Type': 'application/json'
          }
        })

        uni.hideLoading()
        console.log(res[1].data.code)
        // 处理响应数据
        if (res[1].data.code === 0) {
          // 存储用户信息到本地
          uni.setStorageSync('userInfo', res[1].data.data)

          uni.showToast({title: '登录成功'})

          // 这里可以添加跳转到首页的逻辑
          uni.reLaunch({url: '/pages/index/index'})
        } else {
          uni.showToast({
            title: res.msg || '登录失败，请重试',
            icon: 'none'
          })
        }
      } catch (error) {
        uni.hideLoading()
        uni.showToast({
          title: '请求失败，请检查网络',
          icon: 'none'
        })
        console.error('登录请求失败:', error)
      }
    }
  }
}
</script>

<style scoped>
.container {
  padding: 40rpx;
  height: 100vh;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
}

.form-container {
  width: 100%;
}

.input {
  height: 80rpx;
  padding: 20rpx;
  margin-bottom: 40rpx;
  border-radius: 8rpx;
  background-color: #ffffff;
}

.submit-btn {
  margin-top: 60rpx;
  border-radius: 8rpx;
}
.container {
  padding: 40rpx;
  height: 100vh;
  display: flex;          /* 保留flex布局 */
  flex-direction: column; /* 关键：改为垂直排列 */
  align-items: center;    /* 水平居中 */
  background-color: #f5f5f5;
}
.title {
  margin-bottom: 20rpx; /* 增加logo与表单之间的间距 */
}
.logo {
  width: 410px;  /* 根据需求调整宽度 */
  height: 164px; /* 根据需求调整高度 */
  margin: 23px 0; /* 可选：添加上下边距调整间距 */
}
/* 在<style scoped>中添加以下样式 */
.agreement-text {
  margin-top: 40rpx;    /* 与表单间距 */
  font-size: 24rpx;     /* 小号字体 */
  color: #999999;       /* 浅灰色 */
  text-align: center;   /* 水平居中 */
}

</style>
